<template>
  <div :class="{'collapse-open': isCollapse}">
    <!-- <div id="menuSearch" v-show="!isCollapse" >
      <input type="text" placeholder="请输入关键字搜索" v-model="kw" @input="find()" @focus="focus">
    </div> -->
    <!-- <div id="menuCon" class="fb1">
      <menuItem
        v-for="item in mt"
        :key="item.id"
        :item="item"
        :level="0"
        :activeMenu="nowTab"
        :handleClick="handleClick"
        :withKW="withKW"
        :kw="kw"
      />
    </div> -->
    <div id="menuCon" class="fb1">
      <el-menu
        :default-active="currentPath"
        class="el-menu-vertical-demo"
        background-color="#052457"
        text-color="#fff"
        active-text-color="#ffd04b"
        style="height:100%;"
        :router="true"
        :unique-opened="true"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
        >
        <Menu ref ='menu' v-for="item in menus" :key="item.id" :item="item" :isCollapse="isCollapse"/>
      </el-menu>
    </div>
  </div>
</template>

<script>
import menuItem from "./item";
import Menu from "./menu";

export default {
  components: { menuItem, Menu },
  props: ["menus", "nowTab", "isCollapse"],
  data() {
    return {
      kw: "",
      mt: []
    };
  },
  computed: {
    currentPath () {
      let url = this.$route.path
      return url
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    // 树的模糊搜索
    find() {
      this.mt = JSON.parse(JSON.stringify(this.menus));
      if (this.kw != "") this.findNode(this.kw, this.mt);
    },
    findNode(key, raw) {
      var all = false;
      for (let i = 0; i < raw.length; i++) {
        raw[i].expand = true;
        var has = false;
        if (raw[i].name.toLowerCase().indexOf(key.toLowerCase()) > -1) {
          has = true;
        } else if (raw[i].children) {
          has = this.findNode(key, raw[i].children);
        } else {
          has = false;
        }
        if (!has) {
          raw.splice(i, 1);
          i--;
        }
        all = all || has;
      }
      return all;
    },
    focus(e) {
      e.target.select();
    },
    // 打开菜单
    handleClick(node) {
      if (node.leaf) {
        var r = this.$router.match({ name: node.label });
        // 滚动条置0
        r.meta.scrollTop = 0;

        this.$router.push({ name: node.label });
        this.$store.commit("ADD_TAB", node.label);
      }
    },
    // 关键字高亮
    withKW(name) {
      if (this.kw == "") return name;
      var findText = name.split(this.kw);
      return findText.join(
        '<span style="color:#d9534f;">' + this.kw + "</span>"
      );
    }
  },
  created() {
    /*console.log(this.menus);
    if (this.menus.length === 1) {
      this.menus = this.menus[0].children
    }
    if (this.menus) {
      this.mt = JSON.parse(JSON.stringify(this.menus));
    }*/
    // this.mt = JSON.parse(JSON.stringify(this.menus));
  }
};
</script>

<style lang="less">
@import "~@frames/dashboard/style/var";

#menu {
  display: flex;
  flex-direction: column;

  &Search {
    padding: 10px 12px;
    border-bottom: 1px solid #f5f7fb;
    input {
      width: 100%;
      height: 30px;
      outline: none;
      border: 1px solid rgba(0, 0, 0, 0.1);

      font-size: 12px;
      line-height: 28px;
      text-align: center;

      transition: all 0.3s;
      &:focus {
        border-color: fadeout(@primary, 20%);
        box-shadow: 0 0 0 4px fadeout(@primary, 90%);
      }
    }
  }

  &Con {
    overflow: auto;
    overflow: overlay;
  }
}
.collapse-open {
  width: 63px!important;
}
.collapse-open .el-icon-arrow-right{
  display: none;
}
</style>
